<template>
  <div class="preOrder">
    <el-table :data="currentChargeProduct" style="width: 100%">
      <el-table-column align="center" label="充值产品">
        <template v-slot="{ row }">
          <img style="vertical-align: middle" width="40%" :src="row.imageUrl" alt="" />
          &nbsp;
          <span style="color: #f4c14f; font-weight: bolder">{{ row.productName }}</span>
          <br />
          <span>{{ row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="price" label="单价">
        <template v-slot="{ row }">
          <span class="price">
            {{ row.price }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="数量">
        <template v-slot="{ row }">
          <el-input-number
            v-model="quantity"
            size="mini"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
          <i v-if="false">{{ row }}</i>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="小计">
        <template>
          <span class="total_fee">{{ total_fee }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg"
            >实付款：</span
          >
          <span class="realpay--price-symbol">¥</span>
          <span class="realpay--price" style="color: rgb(255, 80, 0)">{{
            total_fee
          }}</span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span
              ><span class="confirmAddr-pro"
                >尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有</span
              >
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">充值账户：</span
              ><span class="confirmAddr-usn">sb</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="commitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.price {
  color: #ff0036;
  font-weight: bolder;
}
.total_fee {
  font-size: 16px;
  color: #ff0036;
}
.el-button {
  width: 180px;
  border-radius: 0;
}
.confirm-title {
  text-align: left;
  margin-bottom: 30px;
}
.pre-order {
  padding: 80px 100px 0 100px;
}
.total-fee {
  margin-top: 50px;
  text-align: right;
}
.box-wrap {
  display: inline-block;
  border: 1px solid #ff0036;
  .box-shadow {
    border: 3px solid #fff0e8;
    min-width: 300px;
    padding: 10px 5px 10px 20px;
    .realpay--title {
      font-weight: 700;
      color: #333;
    }
    .realpay--price-symbol {
      font-size: 26px;
      margin-right: 4px;
      color: #999;
    }
    .realpay--price {
      color: #ff0036;
      font: 700 26px tahoma;
    }
    .order-confirmAddr {
      line-height: 1.6;
      font-weight: bolder;
      margin-top: 10px;
      font-size: 16px;
      // text-align: center;
      // font-family: "PingFang SC";
      .confirmAddr-usn {
        color: #ff0036;
        font-size: 20px;
      }
      .confirmAddr-pro {
        color: goldenrod;
        font-size: 16px;
      }
    }
  }
}
</style>

<script>
//将vuex中的数据映射过来
import { mapState, mapMutations } from "vuex";
import * as api from "../../../api/index";
export default {
  methods: {
    ...mapMutations(["SET_ORDER_ID"]),
    commitOrder() {
      this.$confirm("您正在提交订单", "是否确认?", "提示", {
        confirmButtonText: "提交订单",
        cancelButtonText: "取消提交",
        type: "warning",
      })
        .then(() => {
          //交互效果 让用户确认提交
          //1.发起请求,提交订单,后端会返回生成的订单号
          let product_id = this.currentChargeProduct[0].product_id;
          let quantity = this.quantity;
          api.preOrderApi(product_id, quantity).then((res) => {
            if (res.data.state) {
              //订单创建成功
              //2.跳转到支付页面,根据订单号,发送请求,获取订单详情
              let order_id = res.data.order_id; //后台返回的订单id,通过订单id可以发起支付
              this.$router.push({ name: "pay" });
              this.SET_ORDER_ID(order_id);
              //提示
              this.$message({
                type: "success",
                message: "订单提交成功!",
              });
            } else {
              this.$message.error("订单提交失败");
            }
            // console.log(res);
          });

          //3.得到订单详情,然后还需要发送支付请求
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交订单",
          });
        });
    },
  },
  computed: {
    ...mapState(["currentChargeProduct"]),
    total_fee() {
      //计算总价
      return this.quantity * this.currentChargeProduct[0].price;
    },
  },
  data() {
    return {
      //   currentProduct: {},
      quantity: 1,
      // total_fee: 0,
    };
  },
};
</script>
